<template>
  <div style="padding: 20px;">
      <h1 style="text-align: center;">Combat Script Search</h1>
      <el-row :gutter="20" type="flex" align="middle">
          <el-col :span="3">
              <el-select v-model="searchType" placeholder="请选择搜索类型" style="width: 100%;">
                  <el-option label="包含" :value="SEARCH_TYPES.CONTRAIN"></el-option>
                  <el-option label="(顺序)包含" :value="SEARCH_TYPES.SEQ_CONTRAIN"></el-option>
                  <el-option label="按照脚本id" :value="SEARCH_TYPES.MATCH_ID"></el-option>
              </el-select>
          </el-col>
          <el-col :span="3">
              <el-select v-model="selectedScriptType" placeholder="脚本类型" style="width: 100%;" clearable>
                  <el-option v-for="type in scriptTypes" 
                      :key="type.value" 
                      :label="type.label" 
                      :value="type.value">
                  </el-option>
              </el-select>
          </el-col>
          <el-col :span="16">
              <el-input 
                  v-model="searchQuery" 
                  :placeholder="searchTips"
                  @keyup.enter="handleSearch">
              </el-input>
          </el-col>
          <el-col :span="2">
              <el-button 
                  type="primary" 
                  @click="handleSearch" 
                  style="width: 100%;"
                  :loading="isSearching"
                  :disabled="isSearching">
                  搜索
              </el-button>
          </el-col>
      </el-row>

      <el-row :gutter="20" type="flex" align="middle">
          <el-col :span="3">
              <el-button 
                  type="primary" 
                  @click="showAddDialog"
                  style="width: 100%;">
                  新建脚本
              </el-button>
          </el-col>
          <el-col :span="3">
              <el-button 
                  type="warning" 
                  @click="queryPlaceholder"
                  style="width: 100%;"
                  :loading="isSearching">
                  占位查询
              </el-button>
          </el-col>
          <el-col :span="3">
              <el-button 
                  type="success" 
                  @click="showPlaceholderDialog"
                  style="width: 100%;"
                  :loading="isSubmitting">
                  脚本占位
              </el-button>
          </el-col>
          <el-col :span="12">
              <div v-if="totalHits !== null" style="margin-top: 10px;">
                  共找到 {{ totalHits }} 条记录
              </div>
          </el-col>
      </el-row>

      <el-table 
          :data="searchResults" 
          style="width: 100%"
          :fit="true">
          <el-table-column 
              prop="id" 
              label="ID" 
              width="100"
              sortable
              :sort-method="sortById"
              show-overflow-tooltip>
          </el-table-column>
          <!-- <el-table-column 
              prop="score" 
              label="匹配度" 
              width="100"
              sortable
              :sort-method="sortByScore"
              show-overflow-tooltip></el-table-column> -->
          <el-table-column 
              prop="type_str" 
              label="类型" 
              width="120"
              column-key="type_str"
              show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="desc" label="描述" min-width="400">
            <template #default="{ row }">
              <span v-html="highlightDesc(row.desc)"></span>
            </template>
          </el-table-column>
          <el-table-column prop="note" label="备注" width="150"></el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
              <template #default="{ row }">
                  <el-button 
                      type="primary" 
                      size="small" 
                      @click="showEditDialog(row)"
                      :disabled="isSubmitting">
                      编辑
                  </el-button>
                  <el-button 
                      type="danger" 
                      size="small" 
                      @click="handleDelete(row)"
                      :disabled="isSubmitting">
                      删除
                  </el-button>
              </template>
          </el-table-column>
      </el-table>

      <div class="pagination-container">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[9999, 10, 20, 50, 100]"
              :total="totalHits"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
          />
      </div>

      <!-- 添加返回顶部按钮 -->
      <el-backtop :right="30" :bottom="30">
          <div class="back-to-top">
              <el-icon><ArrowUpBold /></el-icon>
          </div>
      </el-backtop>

      <!-- 添加新脚本的对话框 -->
      <el-dialog
          v-model="dialogVisible"
          title="新增脚本"
          width="50%"
          :close-on-click-modal="false">
          <el-form
              ref="addFormRef"
              :model="addForm"
              :rules="addFormRules"
              label-width="120px">
              <el-form-item label="脚本ID" prop="id">
                  <el-input v-model.number="addForm.id" type="number" />
              </el-form-item>
              <el-form-item label="脚本类型" prop="type_str">
                  <el-select v-model="addForm.type_str" placeholder="请选择脚本类型" style="width: 100%;">
                      <el-option
                          v-for="type in scriptTypes"
                          :key="type.value"
                          :label="type.label"
                          :value="type.value">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="描述" prop="desc">
                  <el-input v-model="addForm.desc" type="textarea" :rows="3" />
              </el-form-item>
              <el-form-item label="备注" prop="note">
                  <el-input v-model="addForm.note" />
              </el-form-item>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitAdd" :loading="isSubmitting">
                      确定
                  </el-button>
              </span>
          </template>
      </el-dialog>

      <!-- 添加编辑脚本的对话框 -->
      <el-dialog
          v-model="editDialogVisible"
          title="编辑脚本"
          width="50%"
          :close-on-click-modal="false">
          <el-form
              ref="editFormRef"
              :model="editForm"
              :rules="editFormRules"
              label-width="120px">
              <el-form-item label="脚本ID">
                  <el-input v-model="editForm.id" disabled />
              </el-form-item>
              <el-form-item label="脚本类型">
                  <el-input v-model="editForm.type_str" disabled />
              </el-form-item>
              <el-form-item label="描述" prop="desc">
                  <el-input v-model="editForm.desc" type="textarea" :rows="3" />
              </el-form-item>
              <el-form-item label="备注" prop="note">
                  <el-input v-model="editForm.note" type="textarea" :rows="2" />
              </el-form-item>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                  <el-button @click="editDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitEdit" :loading="isSubmitting">
                      确定
                  </el-button>
              </span>
          </template>
      </el-dialog>

      <!-- 添加脚本占位的对话框 -->
      <el-dialog
          v-model="placeholderDialogVisible"
          title="添加脚本占位"
          width="50%"
          :close-on-click-modal="false">
          <el-form
              ref="placeholderFormRef"
              :model="placeholderForm"
              :rules="placeholderFormRules"
              label-width="120px">
              <el-form-item label="脚本类型" prop="type_str">
                  <el-select v-model="placeholderForm.type_str" placeholder="请选择脚本类型" style="width: 100%;">
                      <el-option
                          v-for="type in scriptTypes"
                          :key="type.value"
                          :label="type.label"
                          :value="type.value">
                      </el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="占位个数" prop="count">
                  <el-input-number v-model="placeholderForm.count" :min="1" :max="100" />
              </el-form-item>
              <el-form-item label="占位文本" prop="text">
                  <el-input v-model="placeholderForm.text" />
              </el-form-item>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                  <el-button @click="placeholderDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitPlaceholder" :loading="isSubmitting">
                      确定
                  </el-button>
              </span>
          </template>
      </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref, watch, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowUpBold } from '@element-plus/icons-vue'
import {
SEARCH_TYPES,
type CombatScriptDocument,
scriptTypeOptions,
type ESSearchResponse,
SCRIPT_CONSTANTS,
SCRIPT_TYPES
} from './CombatScriptRepDO'

import {
buildESQuery,
esSearchScripts,
esAddScript,
esEditScript,
esDeleteScript,
esGetMaxId,
} from './CombatScriptRep'

import type { FormInstance, FormRules } from 'element-plus'

// ---------------------- vars -----------------------------
// Add cache related variables
const searchCache = ref<{
  key: string;
  results: CombatScriptDocument[];
  totalHits: number;
  timestamp: number;
} | null>(null)

let searchType = ref<number>(SEARCH_TYPES.MATCH_ID)
const searchResults = ref<CombatScriptDocument[]>([])
const scriptTypes = scriptTypeOptions
const searchQuery = ref('')

// Add total hits counter
const totalHits = ref<number | null>(null)
// 分页相关参数
const currentPage = ref(1)
const pageSize = ref(9999)

const scriptDocsPartition = ref<Array<{
  type_str: string
  docs: CombatScriptDocument[]
}>>([])

// Add selected script type ref
const selectedScriptType = ref('')

// 添加新的响应式变量
const dialogVisible = ref(false)
const isSubmitting = ref(false)
const addFormRef = ref<FormInstance>()
const addForm = ref({
  id: null as number | null,
  type_str: '',
  desc: '',
  note: ''
})

// 表单验证规则
const addFormRules = {
  id: [
      { required: true, message: '请输入脚本ID', trigger: 'blur' },
      { type: 'number', message: 'ID必须为数字', trigger: 'blur' }
  ],
  type_str: [
      { required: true, message: '请选择脚本类型', trigger: 'change' }
  ],
  desc: [
      { required: true, message: '请输入描述', trigger: 'blur' }
  ]
} as FormRules

// 添加编辑脚本的响应式变量
const editDialogVisible = ref(false)
const editFormRef = ref<FormInstance>()
const editForm = ref({
  id: null as number | null,
  type_str: '',
  desc: '',
  note: ''
})

// 编辑表单验证规则
const editFormRules = {
  desc: [
      { required: true, message: '请输入描述', trigger: 'blur' }
  ]
} as FormRules

// 添加脚本占位的响应式变量
const placeholderDialogVisible = ref(false)
const placeholderFormRef = ref<FormInstance>()
const placeholderForm = ref({
  type_str: '',
  count: 1,
  text: ''
})

// 占位表单验证规则
const placeholderFormRules = {
  type_str: [
      { required: true, message: '请选择脚本类型', trigger: 'change' }
  ],
  count: [
      { required: true, message: '请输入占位个数', trigger: 'blur' },
      { type: 'number', min: 1, max: 100, message: '个数必须在1到100之间', trigger: 'blur' }
  ],
  text: [
      { required: true, message: '请输入占位文本', trigger: 'blur' }
  ]
} as FormRules

// Add lastSearch state after other ref declarations
const lastSearch = ref<{
  type: number;
  query: string;
} | null>(null)

// ---------------------- methods -----------------------------
const highlightDesc = (desc: string|undefined) => {
if (typeof desc === 'string') {
  return desc.replace(/列表/g, '<span class="highlight-keyword">列表</span>')
}
return desc
}

// 修改 performSearch 函数
const isSearching = ref(false)

// Add function to generate cache key
const generateCacheKey = (searchTypeParam: number, searchQueryParam: string, selectedType: string, page: number, size: number): string => {
  return `${searchTypeParam}-${searchQueryParam}-${selectedType}-${page}-${size}`
}

// Add function to clear cache
const clearCache = () => {
  console.log("clearCache")
  searchCache.value = null
}

// Modify performSearch function to use cache
const performSearch = async (resetPage: boolean = true, searchTypeParam?: number, searchQueryParam?: string) => {
  if (isSearching.value) return
  
  isSearching.value = true
  try {
      if (resetPage) {
          currentPage.value = 1
      }

      const currentSearchType = searchTypeParam ?? searchType.value
      const currentSearchQuery = searchQueryParam ?? searchQuery.value
      const cacheKey = generateCacheKey(
          currentSearchType,
          currentSearchQuery,
          selectedScriptType.value,
          currentPage.value,
          pageSize.value
      )

      // Check if we have valid cached results
      if (searchCache.value && searchCache.value.key === cacheKey) {
          console.log("use cache")
          searchResults.value = searchCache.value.results
          totalHits.value = searchCache.value.totalHits
          classifyType(searchResults.value)
          isSearching.value = false
          return
      }

      const query = buildESQuery(
          currentSearchType,
          currentSearchQuery,
          selectedScriptType.value
      )

      const response = await esSearchScripts(
          query,
          (currentPage.value - 1) * pageSize.value,
          pageSize.value
      )
      
      const data = response.data as ESSearchResponse<CombatScriptDocument>
      totalHits.value = data.hits.total.value
      searchResults.value = data.hits.hits.map(hit => ({
          id: hit._source.id,
          desc: hit._source.desc,
          note: hit._source.note,
          type_str: hit._source.type_str,
          score: hit._score
      }))

      // Cache the results
      searchCache.value = {
          key: cacheKey,
          results: searchResults.value,
          totalHits: totalHits.value!,
          timestamp: Date.now()
      }

      classifyType(searchResults.value)
  } catch (error) {
      console.error('Search failed:', error)
      ElMessage.error('搜索失败，请稍后重试')
      totalHits.value = null
      clearCache()
  } finally {
      isSearching.value = false
  }
}

// 处理页码变化
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  if (lastSearch.value) {
      performSearch(false, lastSearch.value.type, lastSearch.value.query)
  } else {
      performSearch(false, searchType.value, searchQuery.value)
  }
}

// 处理每页显示数量变化
const handleSizeChange = (val: number) => {
  pageSize.value = val
  if (lastSearch.value) {
      performSearch(false, lastSearch.value.type, lastSearch.value.query)
  } else {
      performSearch(false, searchType.value, searchQuery.value)
  }
}

// 添加计算属性
const searchTips = computed(() => getSearchTips(searchType.value as number))

// 添加排序方法
const sortById = (a: CombatScriptDocument, b: CombatScriptDocument) => a.id - b.id

// 解析搜索结果并对类型进行分类
const classifyType = (results: CombatScriptDocument[]) => {
  // 清空之前的分类结果
  scriptDocsPartition.value = []
  
  // 使用对象来一次遍历完成分类
  const typeGroups: Record<string, CombatScriptDocument[]> = {}
  
  for (const result of results) {
      if (!typeGroups[result.type_str]) {
          typeGroups[result.type_str] = []
          // 同时构建最终数据结构
          scriptDocsPartition.value.push({
              type_str: result.type_str,
              docs: typeGroups[result.type_str]
          })
      }
      typeGroups[result.type_str].push(result)
  }
}

// 添加搜索提示文本函数
const getSearchTips = (searchType: number): string => {
switch (searchType) {
  case SEARCH_TYPES.FUZZY:
    return '请输入要模糊搜索的内容'
  case SEARCH_TYPES.CONTRAIN:
    return '请输入要包含的关键词，多个关键词用空格分隔'
  case SEARCH_TYPES.SEQ_CONTRAIN:
    return '请输入要按顺序包含的关键词，多个关键词用空格分隔'
  case SEARCH_TYPES.MATCH_ID:
    return '请输入脚本ID'
  default:
    return '请先选择搜索类型'
}
}

// 显示添加对话框
const showAddDialog = () => {
  addForm.value = {
      id: null,
      type_str: '',
      desc: '',
      note: ''
  }
  dialogVisible.value = true
}

// 提交新增表单
const submitAdd = async () => {
  if (!addFormRef.value) return
  
  await addFormRef.value.validate(async (valid) => {
      if (valid && addForm.value.id !== null) {
          isSubmitting.value = true
          try {
              const response = await esAddScript({
                  id: addForm.value.id as number,
                  type_str: addForm.value.type_str,
                  desc: addForm.value.desc,
                  note: addForm.value.note || undefined
              })
              
              if (response.status === 201) {
                  clearCache() // Clear cache after successful add
                  // 如果当前页面数据少于页面大小，直接添加列表中
                  if (searchResults.value.length < pageSize.value) {
                      searchResults.value.push({
                          id: addForm.value.id as number,
                          type_str: addForm.value.type_str,
                          desc: addForm.value.desc,
                          note: addForm.value.note,
                          score: 0
                      })
                      // 更新总数
                      if (totalHits.value !== null) {
                          totalHits.value++
                      }
                  } else {
                      // 如果是满页，则重新加载当前页
                      await performSearch(false)
                  }
                  
                  ElMessage.success('添加成功')
                  dialogVisible.value = false
              } else {
                  ElMessage.error('添加失败')
              }
          } catch (error: any) {
              console.error('Failed to add script:', error)
              ElMessage.error('添加失败，请稍后重试: ' + error.message)
          } finally {
              isSubmitting.value = false
          }
      }
  })
}

// 显示编辑对话框
const showEditDialog = (row: CombatScriptDocument) => {
  editForm.value = {
      id: row.id,
      type_str: row.type_str,
      desc: row.desc,
      note: row.note || ''
  }
  editDialogVisible.value = true
}

// 提交编辑表单
const submitEdit = async () => {
  if (!editFormRef.value) return

  await editFormRef.value.validate(async (valid) => {
      if (valid) {
          try {
              await ElMessageBox.confirm(
                  '确定要修改这条记录吗？',
                  '确认修改',
                  {
                      confirmButtonText: '确定',
                      cancelButtonText: '取消',
                      type: 'warning',
                  }
              )

              isSubmitting.value = true
              const response = await esEditScript({
                  id: editForm.value.id!,
                  type_str: editForm.value.type_str,
                  desc: editForm.value.desc,
                  note: editForm.value.note,
                  score: 0
              })

              if (response.status === 200) {
                  clearCache() // Clear cache after successful edit
                  // 更新本地数据，使用id和type_str共同判断
                  const index = searchResults.value.findIndex(
                      item => item.id === editForm.value.id && item.type_str === editForm.value.type_str
                  )
                  if (index !== -1) {
                      searchResults.value[index] = {
                          ...searchResults.value[index],
                          desc: editForm.value.desc,
                          note: editForm.value.note
                      }
                  }
                  
                  ElMessage.success('修改成功')
                  editDialogVisible.value = false
              } else {
                  ElMessage.error('修改失败')
              }
          } catch (error: any) {
              if (error !== 'cancel') {
                  console.error('Failed to edit script:', error.message)
                  ElMessage.error('修改失败，请稍后重试')
              }
          } finally {
              isSubmitting.value = false
          }
      }
  })
}

// 修改 handleDelete 函数
const handleDelete = async (row: CombatScriptDocument) => {
  try {
      await ElMessageBox.confirm(
          '确定要删除这条记录吗？此操作不可恢复！',
          '确认删除',
          {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
          }
      )

      isSubmitting.value = true
      try {
          const response = await esDeleteScript(row.id, row.type_str)

          if (response.status === 200) {
              clearCache() // Clear cache after successful delete
              // 更新本地数据，使用id和type_str共同判断
              searchResults.value = searchResults.value.filter(
                  item => !(item.id === row.id && item.type_str === row.type_str)
              )
              // 更新总数
              if (totalHits.value !== null) {
                  totalHits.value--
              }
              
              ElMessage.success('删除成功')
          } else {
              ElMessage.error('删除失败')
          }
      } catch (error) {
          if (error instanceof Error) {
              if (error.message === '文档不存在') {
                  ElMessage.warning('该记录已不存在，将从列表中移除')
                  // 同样使用id和type_str共同判断
                  searchResults.value = searchResults.value.filter(
                      item => !(item.id === row.id && item.type_str === row.type_str)
                  )
                  if (totalHits.value !== null) {
                      totalHits.value--
                  }
              } else {
                  ElMessage.error('删除失败：' + error.message)
              }
          } else {
              ElMessage.error('删除失败，请稍后重试')
          }
          console.error('Failed to delete script:', error)
      }
  } catch (error) {
      // 用户取消删除操作
      if (error !== 'cancel') {
          console.error('Delete confirmation failed:', error)
      }
  } finally {
      isSubmitting.value = false
  }
}

// 占位查询函数
const queryPlaceholder = async () => {
  lastSearch.value = {
      type: SEARCH_TYPES.CONTRAIN,
      query: SCRIPT_CONSTANTS.PLACEHOLDER_TEXT
  }
  await performSearch(true, SEARCH_TYPES.CONTRAIN, SCRIPT_CONSTANTS.PLACEHOLDER_TEXT)
}

// 修改搜索按钮点击事件处理
const handleSearch = async () => {
  lastSearch.value = {
      type: searchType.value,
      query: searchQuery.value
  }
  await performSearch(true, searchType.value, searchQuery.value)
}

// 显示占位对话框
const showPlaceholderDialog = () => {
  placeholderForm.value = {
      type_str: '',
      count: 1,
      text: ''
  }
  placeholderDialogVisible.value = true
}

// 提交占位表单
const submitPlaceholder = async () => {
  if (!placeholderFormRef.value) return
  
  await placeholderFormRef.value.validate(async (valid) => {
      if (valid) {
          isSubmitting.value = true
          try {
              // 获取最大ID
              const maxId = await esGetMaxId(placeholderForm.value.type_str)
              console.log("maxId", maxId)
              const startId = maxId + 1
              
              // 批量添加脚本
              for (let i = 0; i < placeholderForm.value.count; i++) {
                  await esAddScript({
                      id: startId + i,
                      type_str: placeholderForm.value.type_str,
                      desc: `${placeholderForm.value.text}${SCRIPT_CONSTANTS.PLACEHOLDER_TEXT}`,
                      note: ""
                  })
              }
              clearCache()
              ElMessage.success(`成功添加${placeholderForm.value.count}个占位脚本`)
              placeholderDialogVisible.value = false
              
              // 执行查询以显示新添加的脚本
              // await performSearch(true, SEARCH_TYPES.CONTRAIN, SCRIPT_CONSTANTS.PLACEHOLDER_TEXT)
          } catch (error: unknown) {
              console.error('Failed to add placeholder scripts:', error)
              if (error instanceof Error) {
                  ElMessage.error('添加占位脚本失败：' + error.message)
              } else {
                  ElMessage.error('添加占位脚本失败：' + String(error))
              }
          } finally {
              isSubmitting.value = false
          }
      }
  })
}

// 监听 type_str 的变化来更新 count
watch(() => placeholderForm.value.type_str, (newType) => {
  // 根据类型更新 count 的默认值
  placeholderForm.value.count = newType === SCRIPT_TYPES.PASSIVE ? 10 : 1
})

// Add onMounted and onBeforeUnmount hooks
onMounted(() => {
  console.log("onMounted")
  // Clear cache when component is mounted (page refresh)
  // clearCache()
  
  // Add window load event listener
  window.addEventListener('load', () => {
      console.log("window load")
      clearCache()
  })
})

// Add watch for searchQuery
watch(() => searchQuery.value, (newQuery) => {
  // Check if the query is a pure number
  const isNumber = /^\d+$/.test(newQuery.trim())
  
  // Auto switch search type based on input
  if (isNumber && searchType.value !== SEARCH_TYPES.MATCH_ID) {
      searchType.value = SEARCH_TYPES.MATCH_ID
      console.log('检测到纯数字输入，已自动切换为"按照脚本id"搜索模式')
  } else if (!isNumber && searchType.value === SEARCH_TYPES.MATCH_ID) {
      searchType.value = SEARCH_TYPES.CONTRAIN
      console.log('检测到文本输入，已自动切换为"包含"搜索模式')
  }
})

</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}

/* Add styles for table borders */
:deep(.el-table) {
  border: 1px solid var(--el-border-color);
}

:deep(.el-table__header-wrapper th.el-table__cell) {
  background-color: var(--el-fill-color-light);
  border: 1px solid var(--el-border-color);
}

:deep(.el-table__cell) {
  border: 1px solid var(--el-border-color) !important;
}

:deep(.el-table--border) {
  border-right: 1px solid var(--el-border-color);
  border-bottom: 1px solid var(--el-border-color);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.back-to-top {
  height: 100%;
  width: 100%;
  background-color: var(--el-bg-color-overlay);
  box-shadow: var(--el-box-shadow-lighter);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--el-transition-all);
}

.back-to-top:hover {
  background-color: var(--el-color-primary-light-9);
}

.el-button {
  transition: all 0.3s ease;
}

.el-button:not(:disabled):hover {
  transform: scale(1.05);
}

.el-button:not(:disabled):active {
  transform: scale(0.95);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.highlight-keyword) {
background-color: #ffd04b;
padding: 0 4px;
border-radius: 3px;
font-weight: bold;
}

</style>